<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - $.dom.Element</title>

		<style type="text/css">
			/* default.css */
body
{
	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	width: 800px;
}

.header
{
	clear: both;
	background-color: #ccc;
	padding: 8px;
}

h1
{
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 0 .3em;
}

hr
{
	border: none 0;
	border-top: 1px solid #7F8FB1;
	height: 1px;
}

pre.code
{
	display: block;
	padding: 8px;
	border: 1px dashed #ccc;
}

#index
{
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	background-color: #F3F3F3;
	padding: 8px;
}

#content
{
	margin-left: 190px;
	width: 600px;
}

.classList
{
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 8px;
	font-family: arial, sans-serif;
	font-size: 1em;
	overflow: auto;
}

.classList li
{
	padding: 0;
	margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
	font-size:170%;
	line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
	background-color: #7F8FB1;
	color: #fff;
	font-size:130%;
	text-align: left;
	padding: 2px 6px 2px 6px;
	border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px #7F8FB1 solid;
	border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
	border-left: 1px #7F8FB1 solid;
	width: 140px;
	text-align: right;
}

td.attributes, .fixedFont
{
	line-height: 15px;
	color: #002EBE;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}

.summaryTable td.nameDescription
{
	text-align: left;
	font-size: 13px;
	line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
	line-height: 15px;
	padding: 4px;
	padding-left: 4px;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
	list-style: square;
	margin-left: 20px;
	padding-left: 0;
}

.detailList {
	margin-left: 20px; 
	line-height: 15px;
}
.detailList dt { margin-left: 20px; }

.detailList .heading
{
	font-weight: bold;
	padding-bottom: 6px;
	margin-left: 0;
}

.light, td.attributes, .light a:link, .light a:visited
{
	color: #777;
	font-style: italic;
}

.fineprint
{
	text-align: right;
	font-size: 10px;
}
		</style>
	</head>

	<body>
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->

<!-- ============================== classes index ============================ -->
		<div id="index">
			<!-- begin publish.classesIndex -->
			<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
	
	<li><a href="../symbols/%24.html">$</a></li>
	
	<li><a href="../symbols/%24.browser.html">$.browser</a></li>
	
	<li><a href="../symbols/%24.dom.html">$.dom</a></li>
	
	<li><a href="../symbols/%24.dom.DOMTokenList.html">$.dom.DOMTokenList</a></li>
	
	<li><a href="../symbols/%24.dom.Element.html">$.dom.Element</a></li>
	
	<li><a href="../symbols/%24.dom.HTMLElement.html">$.dom.HTMLElement</a></li>
	
	<li><a href="../symbols/%24.dom.KeyboardEvent.html">$.dom.KeyboardEvent</a></li>
	
	<li><a href="../symbols/%24.dom.KeyboardEventListener.html">$.dom.KeyboardEventListener</a></li>
	
	<li><a href="../symbols/%24.dom.keyCodes.html">$.dom.keyCodes</a></li>
	
	<li><a href="../symbols/%24.dom.keyCodes_fixes.html">$.dom.keyCodes_fixes</a></li>
	
	<li><a href="../symbols/%24.dom.keyCodes_Safari2.html">$.dom.keyCodes_Safari2</a></li>
	
	<li><a href="../symbols/%24.dom.keyNames.html">$.dom.keyNames</a></li>
	
	<li><a href="../symbols/%24.dom.Node.html">$.dom.Node</a></li>
	
	<li><a href="../symbols/%24.dom.NodeList.html">$.dom.NodeList</a></li>
	
	<li><a href="../symbols/%24.js.html">$.js</a></li>
	
	<li><a href="../symbols/%24.js.Array.html">$.js.Array</a></li>
	
	<li><a href="../symbols/%24.js.Object.html">$.js.Object</a></li>
	
	<li><a href="../symbols/%24.js.String.html">$.js.String</a></li>
	
	<li><a href="../symbols/%24.profiler.html">$.profiler</a></li>
	
	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
	
</ul>
<hr />
			<!-- end publish.classesIndex -->
		</div>
		
		<div id="content">
<!-- ============================== class title ============================ -->
			<h1 class="classTitle">
				
				Namespace $.dom.Element
			</h1>

<!-- ============================== class summary ========================== -->			
			<p class="description">
				
			
				Holds the DOM Element methods.
				
				
					<br /><i>Defined in: </i> <a href="../symbols/src/src_core-dom.js.html">core-dom.js</a>.
				
			</p>

<!-- ============================== constructor summary ==================== -->			
			
			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class $.dom.Element.">
				<caption>Namespace Summary</caption>
				<thead>
					<tr>
						<th scope="col">Constructor Attributes</th>
						<th scope="col">Constructor Name and Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="attributes">&nbsp;</td>
						<td class="nameDescription" >
							<div class="fixedFont">
								<b><a href="../symbols/%24.dom.Element.html">$.dom.Element</a></b>
							</div>
							<div class="description">Holds the DOM Element methods.</div>
						</td>
					</tr>
				</tbody>
			</table>
			

<!-- ============================== properties summary ===================== -->
			

<!-- ============================== methods summary ======================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class $.dom.Element.">
					<caption>Method Summary</caption>
					<thead>
						<tr>
							<th scope="col">Method Attributes</th>
							<th scope="col">Method Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&lt;static&gt; &nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">$.dom.Element.<b><a href="../symbols/%24.dom.Element.html#.wrap">wrap</a></b>(wrapper)
								</div>
								<div class="description">Wrap the element inside a given wrapper.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&lt;static&gt; &nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">$.dom.Element.<b><a href="../symbols/%24.dom.Element.html#.wrapInner">wrapInner</a></b>(wrapper)
								</div>
								<div class="description">Wrap all the child nodes of the current element.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
			
<!-- ============================== events summary ======================== -->
			

<!-- ============================== constructor details ==================== -->		
			
			<div class="details"><a name="constructor"> </a>
				<div class="sectionTitle">
					Namespace Detail
				</div>
				
				<div class="fixedFont">
						<b>$.dom.Element</b>
				</div>
				
				<div class="description">
					Holds the DOM Element methods.

<p>By default, the global <var>Element.prototype</var> object is extended to 
contain all the methods defined in this namespace.

<p>The global <var>Text.prototype</var> and <var>Comment.prototype</var> DOM 
objects are also extended. However, these two prototypes are only extended to 
contain the new <a href="../symbols/%24.dom.Element.html#.wrap">$.dom.Element.wrap</a> method.

<p>All of these methods use their <var>this</var> object. As such, you need 
to pass the correct <var>this</var> object.

<p>In the examples provided for each method we will assume that the objects 
defined are already extended. Thus code like 
<code><var>element</var>.wrap('&lt;p&gt;')</code> can be written directly.
					
				</div>
				
				
				
				
					
					
					
					
					
					
					
						<dl class="detailList">
						<dt class="heading">See:</dt>
						
							<dd><a href="../symbols/%24.dom.Node.html">$.dom.Node</a></dd>
						
							<dd><a href="../symbols/%24.dom.NodeList.html">$.dom.NodeList</a></dd>
						
						</dl>
					

			</div>
			

<!-- ============================== field details ========================== -->		
			

<!-- ============================== method details ========================= -->		
			
				<div class="sectionTitle">
					Method Detail
				</div>
				
					<a name=".wrap"> </a>
					<div class="fixedFont">&lt;static&gt; 
					
					<span class="light">{Element}</span>
					<span class="light">$.dom.Element.</span><b>wrap</b>(wrapper)
					
					</div>
					<div class="description">
						Wrap the element inside a given wrapper.
						
						
					</div>
					
					
					
					<pre class="code"><code>var <var>elem</var> = document.createElement('p');

document.body.appendChild(<var>elem</var>);</code>

// Now the body would serialize to something like:
// &lt;body&gt;&lt;p&gt;&lt;/p&gt;&lt;/body&gt;

<code>var <var>result</var> = <var>elem</var>.wrap('&lt;div&gt;');</code>

// Now <var>result</var> = the &lt;div&gt; node.
// The body would serialize to something like:
// &lt;body&gt;&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/body&gt;</pre>
					
					<pre class="code"><code>var <var>elem</var> = document.createElement('p');

document.body.appendChild(<var>elem</var>);</code>

// Now the body would serialize to something like:
// &lt;body&gt;&lt;p&gt;&lt;/p&gt;&lt;/body&gt;

<code>var <var>wrapper</var> = '&lt;div id=&#34;test1&#34;&gt;' +
              '&lt;div id=&#34;test2&#34;&gt;';

var <var>result</var> = <var>elem</var>.wrap(<var>wrapper</var>);</code>

// Now <var>result</var> = the #test1 node.
// The body would serialize to something like:
// &lt;body&gt;&lt;div id=&#34;test1&#34;&gt;&lt;div id=&#34;test2&#34;&gt;&lt;p&gt;
// &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;</pre>
					
					<pre class="code"><code>var <var>elem</var> = document.createElement('p');

document.body.appendChild(<var>elem</var>);</code>

// Now the body would serialize to something like:
// &lt;body&gt;&lt;p&gt;&lt;/p&gt;&lt;/body&gt;

<code>var <var>wrapper1</var> = document.createElement('div'),
    <var>wrapper2</var> = document.createElement('div');

<var>wrapper1</var>.id = 'test1';
<var>wrapper1</var>.appendChild(<var>wrapper2</var>);
<var>wrapper2</var>.id = 'test2';

var <var>result</var> = <var>elem</var>.wrap(<var>wrapper1</var>);</code>

// Now <code><var>result</var> = <var>wrapper1</var></code>.
// The body would serialize to something like:
// &lt;body&gt;&lt;div id=&#34;test1&#34;&gt;&lt;div id=&#34;test2&#34;&gt;&lt;p&gt;
// &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;</pre>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{Element|String}</span> <b>wrapper</b>
									
								</dt>
								<dd>The element or the string to use for 
wrapping the current element.

<p>If the wrapper is an element, then it is be used as-is for wrapping.

<p>If the wrapper is a string, it is be parsed as HTML code. Then, the 
firstElementChild of the DOM tree generated by the string becomes the 
wrapper.

<p>For both cases the determined wrapper gets added to the parent node of 
the current element (the <var>this</var> object), if it's available.

<p>The deepest child element of the wrapper is searched, so that the 
current element will be appended into it.</dd>
							
							</dl>
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Throws:</dt>
							
								<dt>
									<span class="light fixedFont">{TypeError}</span>  <b></b>
								</dt>
								<dd>If the current node is not an element/text/comment 
node. This method cannot wrap other kinds of objects.</dd>
							
								<dt>
									<span class="light fixedFont">{ReferenceError}</span>  <b></b>
								</dt>
								<dd>If the wrapper is a string and the current element 
has no owner document.</dd>
							
								<dt>
									<span class="light fixedFont">{ReferenceError}</span>  <b></b>
								</dt>
								<dd>If the wrapper is a string with no elements in it.</dd>
							
							</dl>
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{Element}</span> The wrapper element.</dd>
							
							</dl>
						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
								<dd><a href="../symbols/%24.dom.Element.html#.wrapInner">$.dom.Element.wrapInner</a></dd>
							
							</dl>
						

					<hr />
				
					<a name=".wrapInner"> </a>
					<div class="fixedFont">&lt;static&gt; 
					
					<span class="light">{NodeList}</span>
					<span class="light">$.dom.Element.</span><b>wrapInner</b>(wrapper)
					
					</div>
					<div class="description">
						Wrap all the child nodes of the current element.

<p>The <var>wrapper</var> argument is the same as for 
<a href="../symbols/%24.dom.Element.html#.wrap">$.dom.Element.wrap</a>.
						
						
					</div>
					
					
					
					<pre class="code"><code>var <var>child1</var> = document.createElement('p'),
    <var>child2</var> = document.createElement('p');

<var>child1</var>.id = 'child1';
<var>child2</var>.id = 'child2';

document.body.appendChild(<var>child1</var>);
document.body.appendChild(<var>child2</var>);</code>
// Now the body contains the two children.

<code>var result = document.body.wrapInner('&lt;div&gt;');</code>
// Now <var>result</var> is a NodeList containing <var>child1</var>
// and <var>child2</var>.

// The body would serialize to something like:
// &lt;body&gt;&lt;div&gt;&lt;p id=&#34;child1&#34;&gt;&lt;/p&gt;
// &lt;p id=&#34;chil2&#34;&gt;&lt;/p&gt;&lt;/div&gt;&lt;/body&gt;</pre>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{Element|String}</span> <b>wrapper</b>
									
								</dt>
								<dd>The element or the string to use for 
wrapping the child nodes of the current element.</dd>
							
							</dl>
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Throws:</dt>
							
								<dt>
									<span class="light fixedFont">{TypeError}</span>  <b></b>
								</dt>
								<dd>If the current node is not an element node. This method 
cannot wrap other kinds of objects.</dd>
							
								<dt>
									<span class="light fixedFont">{ReferenceError}</span>  <b></b>
								</dt>
								<dd>If the wrapper is a string and the current element 
has no owner document.</dd>
							
								<dt>
									<span class="light fixedFont">{ReferenceError}</span>  <b></b>
								</dt>
								<dd>If the wrapper is a string with no elements in it.</dd>
							
							</dl>
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{NodeList}</span> The list of wrapped child nodes.
(<code><var>wrapper</var>.childNodes</code>)</dd>
							
							</dl>
						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
								<dd><a href="../symbols/%24.dom.Element.html#.wrap">$.dom.Element.wrap</a></dd>
							
							</dl>
						

					
				
			
			
<!-- ============================== event details ========================= -->		
			
			
			<hr />
		</div>

		
<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a> 2.1.0 on Mon May 11 2009 19:36:21 GMT+0300 (EEST)
		</div>
	</body>
</html>
